<template>
  <div class="ui-list" :style="{'height': height}">
    <template v-if="isLocal">
      <slot></slot>
    </template>
    <template v-else>
      <template v-if="!innerData || !innerData.length">
        <ui-empty></ui-empty>
      </template>
      <template v-else>
        <div
          class="ui-list__item"
          v-for="(item, index) in innerData"
          :key="index"
        >
          <slot name="item" :data="item"></slot>
        </div>
      </template>
    </template>
  </div>
</template>
<script>
import UiEmpty from '../empty'

export default {
  name: 'UiList',
  components: {
    UiEmpty
  },
  props: {
    height: {
      type: String
    },
    loading: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array
    },
    queryMethod: {
      type: Function
    }
  },
  data() {
    return {
      innerLoading: false,
      innerData: this.data
    }
  },
  computed: {
    isLocal() {
      return !this.queryMethod && !Array.isArray(this.data)
    }
  },
  watch: {
    data() {
      this.innerData = this.data
    },
    loading() {
      this.innerLoading = this.loading
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      if (!this.queryMethod) {
        return
      }
      this.innerLoading = true
      this.queryMethod().then((rs) => {
        this.innerData = rs
      }).finally(() => {
        this.innerLoading = false
      })
    }
  }
}
</script>
<style lang="less">
.ui-list{
  overflow: auto;
}
.ui-list__item{
  &:not(:first-child) {
    padding-top: 9px;
  }
  &:not(:last-child) {
    padding-bottom: 9px;
  }
}
</style>
